<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        class="filter-item"
        placeholder="法律法规名"
        style="width: 200px;"
      ></el-input>
      <!-- <el-date-picker
        v-model="listQuery.promulgationDate"
        type="date"
        placeholder="颁布时间"
        class="filter-item"
      ></el-date-picker>
      <el-date-picker
        v-model="listQuery.implementDate"
        type="date"
        placeholder="实施时间"
        class="filter-item"
      ></el-date-picker>-->
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
      height="400"
    >
      <el-table-column align="center" label="编号" min-width="60" prop="id"></el-table-column>
      <el-table-column min-width="150" align="center" label="法律法规名称" prop="name"></el-table-column>
      <el-table-column align="center" label="发文部门" min-width="100" prop="dispatchDepartment"></el-table-column>
      <el-table-column align="center" label="文号" min-width="100" prop="fileNo"></el-table-column>
      <el-table-column align="center" label="级别" min-width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.level | lawsLevelFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="颁布时间" min-width="100" prop="promulgationDate"></el-table-column>
      <el-table-column align="center" label="实施时间" min-width="100" prop="implementDate"></el-table-column>
      <el-table-column align="center" label="专业类别" min-width="100" prop="categoryName"></el-table-column>
      <el-table-column align="center" label="有效性" min-width="100" prop="effectiveness">
        <template slot-scope="scope">
          <span>{{ scope.row.effectiveness | lawsEffectivenessFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="入库状态" min-width="100" prop="state">
        <template slot-scope="scope">
          <span>{{ scope.row.state==1?'不在库':'在库' }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" fixed="right" min-width="100">
        <template slot-scope="scope">
          <router-link :to="'/laws/edit/'+scope.row.id">
            <el-button type="primary" size="small" icon="el-icon-edit">编辑</el-button>
          </router-link>
          <router-link :to="'/laws/detail/'+scope.row.id">
            <el-button size="small" icon="el-icon-view">查看</el-button>
          </router-link>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="delLaw(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      class="pageNum"
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.limit"
      @pagination="getLaws"
    />
  </div>
</template>

<script>
// import previewFile from '@/components/pdf/pdf'
import { fetchList, deleteLaw } from '@/api/laws'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { getBaseDicInfo } from '@/api/baseApi'
let that
export default {
  components: {
    // previewFile,
    Pagination
  },
  /**
   *  name      法律法规名
   *  pubdate   发布时间
   *  entryTime 生效时间
   */
  data() {
    return {
      dialogVisible: false,
      // form: {
      //   name: '',
      //   pubdate: '',
      //   entryTime: ''
      // },
      loading: '',
      listQuery: {
        name: '',
        // promulgationDate: '',
        // implementDate: '',
        pageIndex: 1,
        limit: 10
      },
      total: 0, //页码
      tableData: [],
      lawsEffectivenessList: [],
      lawsLevelList: [],
      categoryList: []
    }
  },
  beforeCreate: function() {
    that = this
  },
  created() {
    this.getLaws()
    this.getLawsEffectivenessList()
    this.getLawsLevelList()
    this.getCategoryList()
  },
  filters: {
    lawsEffectivenessFilter(id = 1) {
      let temp = '暂无'
      that.lawsEffectivenessList.map((item) => {
        if (item.id == id) {
          temp = item.dictValue
        }
      })
      return temp
    },
    lawsLevelFilter(id = 1) {
      let temp = '暂无'
      that.lawsLevelList.map((item) => {
        if (item.id == id) {
          temp = item.dictValue
        }
      })
      return temp
    }
    // categoryFilter(id = 1) {
    //   let temp = '暂无'
    //   that.categoryList.map((item) => {
    //     if (item.id == id) {
    //       temp = item.dictValue
    //     }
    //   })
    //   return temp
    // }
  },
  methods: {
    //获取法规有效性列表
    getLawsEffectivenessList() {
      getBaseDicInfo({ typeId: 7 }).then((response) => {
        this.lawsEffectivenessList = response.data
      })
    },
    //获取法规级别列表
    getLawsLevelList() {
      getBaseDicInfo({ typeId: 8 }).then((response) => {
        this.lawsLevelList = response.data
      })
    },
    //获取专业类别列表
    getCategoryList() {
      getBaseDicInfo({ typeId: 9 }).then((response) => {
        this.categoryList = response.data
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    getLaws() {
      fetchList(this.listQuery)
        .then((response) => {
          if (response.code == 20000) {
            this.tableData = response.data.records
            this.total = response.data.total
          } else {
            console.log('出错了')
          }

          // console.log(this.tableData)
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleFilter() {
      this.getLaws()
    },
    query() {},

    //删除指定法律法规
    delLaw(lrId) {
      this.$confirm('此操作将永久删除该法律法规, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          //发请求删除法律法规
          deleteLaw({ lrId }).then((res) => {
            if (res.code === 20000) {
              //删除成功，重新加载数据
              this.getLaws()
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '失败',
                message: '删除失败',
                type: 'error',
                duration: 2000
              })
            }
          })
        })
        .catch(() => {
          this.$notify({
            title: '失败',
            message: '删除失败',
            type: 'error',
            duration: 2000
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';

.pageNum {
  margin: 0;
  // padding: 0;
}

.pageBtn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.splitLine {
  margin-top: 10px;
  margin-bottom: 20px;
  height: 2px;
  background: #000;
  box-shadow: 5px #000 #eee;
}

.clear {
  padding: 0;
  margin: 0;
}

.input {
  flex: 1;
  width: 100%;
  height: 40px;
}

.btnBox {
  display: flex;
  justify-content: flex-end;
}

.line {
  height: 62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.form {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>
